<template>

    <div class="xunjingwendao">
        <Navbar :activeMenu="currentPath" />
        <div class="main container">

            <!-- 漂浮头部 -->
            <div class="shop_header">

                <div class="shop_input">

                    <el-input placeholder="请输入商品名称" @click="toSearch()"></el-input>
                    <el-button type="warning" size="mini"
                        style="position: absolute;right: 60px;background: #91512b;height: 32px;" v-model="seachVal"
                        @click="goodList">搜索</el-button>

                </div>
                <!-- <div class="" @click="goCart">
                    <i style="font-size: 25px;" class="el-icon-shopping-cart-full"></i>
                    <div v-if="cartCount > 0"
                        style="position: absolute;right: 1px;top: 1px;font-size: 13px;color: #fff;font-weight: 800;width: 13px;height: 13px;text-align:center;border-radius: 50%;background-color: red;line-height: 15px;">
                        <text>{{ cartCount }}</text>
                    </div>
                </div> -->


            </div>

            <!-- 轮播图 -->
            <div class="swiper-div">

                <el-carousel height="300px">
                    <el-carousel-item v-for="swiper in swiperList" :key="swiper.id" @click="toSwiper(swiper)">
                        <img :src="swiper.coverImage" style="width: 100%;height: 300px;" />
                    </el-carousel-item>
                </el-carousel>
            </div>
            <!-- 分类轮播 -->
            <div class="category">
                <div class="box">


                    <div class="category-list">
                        <div class="icon" v-for="(category, index) in categoryList" :key="category.id"
                            @click="toCategory(category)">
                            <img style="width: 80px;height: 80px;" :src="category.picUrl" />
                            <div>{{ category.name }}</div>
                        </div>
                    </div>



                </div>
            </div>

            <!-- 商品列表 -->
            <div class="goods-list">
                <div class="title">— 猜你喜欢 —</div>
                <div class="product-list">
                    <div class="product" v-for="product in productList" :key="product.id" @click="toGoods(product)">
                        <img :src="product.picUrls[0]" />
                        <div class="name">{{ product.name }}</div>
                        <div class="info">
                            <div class="price">{{ product.salesPrice }}</div>
                            <!-- 	<div class="slogan">22人付款</div> -->
                        </div>
                    </div>
                </div>
                <!-- 	<div class="loading-text">{{loadingText}}</div> -->
            </div>
        </div>
    </div>
</template>
<script>
import { goodscategory, goodList, shoppingcartCount, bannerList } from '@/api/index'
export default {
    computed: {

        currentPath() {
            return this.$route.path; // 获取当前路由路径
        },
    },
    data() {

        return {
            pageNum: 1,
            pageSize: 1000,
            cartCount: 0,
            //轮播
            swiperList: [

            ],
            //分类
            seachVal: '',
            categoryList: [],

            //猜你喜欢列表
            productList: [

            ],
            categoryHeight: '85px',
            currentPageindex: 0,
            headerPosition: { position: 'fixed' },
            loadingText: "正在加载..."

        };
    },

    onPageScroll(e) {
        //兼容iOS端下拉时顶部漂移



        if (e.scrollTop >= 0) {
            this.headerPosition.position = "fixed";
        } else {
            this.headerPosition.position = "absolute";
        }


        if (e.scrollTop >= 0) {
            this.headerPosition.position = "fixed";
        } else {
            this.headerPosition.position = "absolute";
        }


    },


    mounted() {
        this.goodscategoryType()
        this.goodList()
        this.shoppingcartCountData()
        this.getBanner()

    },
    methods: {
        getBanner() {
            bannerList({}).then((res) => {
                console.log(res, "99faf")
                this.swiperList = res;
            })
        },
        shoppingcartCountData() {
            shoppingcartCount({}).then((res) => {
                console.log(res)

                this.cartCount = res.data;
            })
        },

        goodList() {
            goodList({ pageNum: this.pageNum, pageSize: this.pageSize, name: this.seachVal }).then((res) => {
                console.log(res)
                this.productList = res.data.records;
            })
        },
        goodscategoryType() {
            goodscategory().then((res) => {
                console.log(res.data, "99")
                this.categoryList = res.data;
            })
        },
        //扫一扫
        scan() {
            uni.scanCode({
                success: (res) => {
                    uni.showToast({ title: '条码内容：' + res.result });
                }
            });
        },
        //搜索跳转
        toSearch() {
            uni.navigateTo({
                url: "/pages/seach/seach"
            })
        },
        goCart() {
            uni.navigateTo({
                url: '/pages/shopCart/shopCart'
            })
        },
        //轮播图跳转
        toSwiper(item) {
            if (item.bannerTypeId == 1) {

                this.$route.push({
                    path: '/lessonList',
                    query: {
                        id: item.dataId,
                        img: item.coverImage
                    }
                });
            } else {
                uni.navigateTo({
                    url: "/pages/shop/shopDetails?id=" + item.dataId
                })
            }
            console.log(item)
        },
        //分类跳转
        toCategory(e) {
            uni.showToast({ title: e.title });
        },
        //推荐商品跳转
        toPick(e) {
            uni.showToast({ title: '推荐商品' + e.goods_id });
        },
        //商品跳转
        toGoods(e) {
            this.$router.push({
                path: '/shopDetails',
                query: {
                    id: e.id
                }
            });

        },
        //更新分类指示器
        categoryChange(event) {
            this.currentPageindex = event.detail.current;
        },


    }
};
</script>
<style lang="scss">
@font-face {
    font-family: "HMfont-home";
    src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAP8AAsAAAAACFwAAAOwAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqEEINSATYCJAMQCwoABCAFhG0HTxtLBxHVmzvJfhS4scOeC1v4zNNRK/hO5b0IHqg/8838ye5XsIDanmAkhZ1NSZygm4SsbYYkp17ICsOUxIP/ZZm9xejtQAD8zzX10geY387mEtXapUd7A5xF6oAi2pJoE8YNY1dexGkIwCSZQoiq1es2RUdhTBKA6N2jWwf0lAlVky3QEYSUrFSIOTjQ5VR5GZjt/168obDQQeLQMGY27FqtMxWf5z5fpgWCgdYugng8B8DWgQYUAhSI7qWujmhhqBAaptJfURzQ0ZEwVkfB58uCQSTZi0o3//JAItBAhGBk2gAURUrtxMQ2BQnPC1IQ8HyZmpvE1XgdMIDtwHVEJt4qkThsZwFPVHiEFTHKtWBBYGGUe/HmsZu6TluCStw+fXGMY9GyUb4b133Xrze9etV77VqzxcuXbYq8bF6/7rtxo5lY6A1cLcuCQJS3oXHswOYKUSaI71xkXr3ayZy2SIix0YumRS6AwEnLmr58WS9z2pKlYcJCCGzcXOU81Xuhp1osIWbBiUQWehda7lTvaNeCJX0WbYgksMA0hdlLo6zDp1PEomIdVu7YE4wN7nH7uGPdHXz2R3uHnX68tcP6SPE5ZSdObNpN/9dybtfmr6tHoy6+rN+DqdvnW9lUbkHTdcUWfKp1yzVr5Ag5HCqGU0Hca3jpAt2GiWFRwxYvdpYFo2b3tN/HvLeFd+BAr5Bu7CXnzKFlJb8dtP3ucx1djc+589Pep+W7X706stfvml+7i8fsWunxp7/f/uzsrgzj9Sv3p+6T7yqwvrfdy3nk/J6eZ84fnHp2lSvf/m/7H7569dDvuY/fTX+Mwdog+QVAGyB/IHmGyK8/exQrX13Maucu+y23rrbi5tQ1T3yTor3oj4kV8a8VtyxSqtQwKyXLbJF2kaI5DgAkYGICPzQG4dwfQxPVOhMEOlExSEJJAg2dTFSRhcCBRVEIQacCmBSkxnqLCAaiIZQBFGAiAIGH3SBxcRo0PFxBFXkPHETzDkLwCA1MfCJiR4tswStWxeEccIPlAbXSxS1rYEH2G0U8ZpeU+sw/Oq+80JR1NjrghW6MOT6JNgQO3NEJPTgPj4PAONK4hlKGYLqq4mVvKlc6M0YVh3PADZYH1EoXd8sHlvv+G0U8ZldDq/D+0XnVPTRl3QIdVFcr2rX090m0IXA8jjs6oYcOPMwQgSkfpnENpewRMF2FSvG2qnJ+zfmE6wATY6YSUmhCCQehg9V8advwun0+nHuJ0VP0kYrcz/Qox5hl') format('woff2');
}

.icon {
    font-family: "HMfont-home" !important;
    font-size: 20px;
    font-style: normal;
    color: #ffffff;

    &.scan {
        &:before {
            content: "\e69a";
        }
    }

    &.menu {
        &:before {
            content: "\e62b";
        }
    }

    &.search {
        &:before {
            content: "\e628";
        }
    }
}

page {
    background-color: #fff;
}

.status {
    width: 100%;
    height: 0;
    /*  #ifdef  APP-PLUS  */
    height: var(--status-bar-height);
    /*  #endif  */
    background-color: #ff570a;
    position: fixed;
    top: 0;
    z-index: 999;
}

.shop_header {
    width: 100%;

    background-color: #fff;
    display: flex;



    z-index: 996;

    .scan {
        width: 100px;
        height: 100px;
        flex-shrink: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .shop_input {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        position: relative;

        input {
            width: calc(100% - 60px);
            height: 33px;
            background-color: #ffffff;

            border: 1px solid #e7e4ef;
            padding-left: 60px;
            font-size: 14px;

        }

        .icon {
            width: 60px;
            height: 120px;
            position: absolute;
            color: #a18090;
            z-index: 996;
            top: 20px;
            left: 0;
            font-size: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    .menu {
        width: 100px;
        height: 100px;
        flex-shrink: 1;
        display: flex;
        justify-content: center;
        align-items: center;

        image {
            width: 60px;
            height: 60px;
            border-radius: 60px;
        }
    }
}

.swiper-div {
    margin-top: 30px;

    .swiper {
        width: 100%;
        height: 350px;

        img {
            width: 100%;
            height: 350px;
        }
    }

    .keep-out {
        width: 100%;
        height: 30px;
        border-radius: 100% 100% 0 0;
        background-color: #ff570a;
        margin-top: -15px;
        position: absolute;
    }
}

.category {
    width: 95%;
    padding: 2.5vw 2.5vw;

    .box {
        width: 100%;
        border-radius: 20px;
        background-color: #ffffff;

        .dots {
            display: flex;
            justify-content: center;
            height: 15px;
            width: 100%;

            div {
                width: 30px;
                height: 5px;
                background-color: rgba(0, 0, 0, 0.2);

                &.active {
                    background-color: #ff570a;
                }
            }
        }

        .category-list {
            width: 100%;
            height: auto;
            display: flex;
            justify-content: flex-start;
            padding: 10px 0;
            flex-flow: wrap;
            font-size: 13px;

            .icon {
                width: 20%;
                display: flex;
                flex-flow: wrap;
                justify-content: center;
                font-size: 13px;
                color: #666;

                image {
                    width: 70%;
                    height: 13.3vw;
                }

                div {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                }
            }
        }

    }
}



.banner {
    image {
        width: 100%;
    }
}

.goods-list {


    .title {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
        color: #979797;
        font-size: 12px;
    }

    .loading-text {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
        color: #979797;
        font-size: 24px;
    }

    .product-list {
        width: 95%;
        display: flex;

        flex-wrap: wrap;

        .product {
            width: 23%;
            border-radius: 20px;
            background-color: #fff;

            height: 400px;
            margin-left: 15px;

            img {
                width: 100%;
                height: 300px;
                border-radius: 20px 20px 0 0;
            }

            .name {
                width: 92%;
                padding: 10px 4%;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                text-align: justify;
                overflow: hidden;
                font-size: 14px;
            }

            .info {
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
                width: 92%;
                padding: 10px 4% 10px 4%;

                .price {
                    color: #e65339;
                    font-size: 14px;
                    font-weight: 600;
                }

                .slogan {
                    color: #807c87;
                    font-size: 13px;
                }
            }
        }

    }
}
</style>
